import React, { useRef } from 'react';
import './App.css'
import ChatInputReact,{ ChildComponentMethods } from './components/chat-input-react/index.tsx'
// @列表
const atPopoverList = [{
  name: 'codesigner',
  avatar:new URL("@/assets/word.jpg", import.meta.url).href,
},
{
  name: 'react',
  avatar: new URL("@/assets/excel.jpg", import.meta.url).href,
},
{
  name: 'vue',
  avatar: new URL("@/assets/video.png", import.meta.url).href,
},
{
  name: 'webgl',
  avatar: new URL("@/assets/pdf.jpg", import.meta.url).href,
},
{
  name: 'gis',
  avatar: new URL("@/assets/txt.jpg", import.meta.url).href,
},{
  name:'cesium',
  avatar: new URL("@/assets/zip.jpg", import.meta.url).href,
},{
  name:'three',
  avatar:new URL("@/assets/word.jpg", import.meta.url).href,
},{
  name:'cannon-es',
  avatar: new URL("@/assets/excel.jpg", import.meta.url).href,
}]

const myStyle={width:'80vw',height:'50vh',border:'1px solid #d3d3d3',maxHeight:'50vh'}

function App() {
  // 处理报错信息
  const handleError=(msg:string)=>{
    console.log(msg)
  }

  // 子组件ref
  const childRef=useRef<ChildComponentMethods>(null)

  // 处理文件上传
  const handleFileChange=(e:React.ChangeEvent<HTMLInputElement>)=>{
    const target=e.target
    if(target.files&&target.files.length>0){
      const file=target.files[0]
      childRef.current&&childRef.current.insertFile(file);
    }
  }

  // 得到导出的数据
  const handleDataExport=()=>{
    const data= childRef.current&& childRef.current.exportData()
    console.log(data)
  }
  return (
    <>
      <div className="chat-input-next-container">
        输入框组件:
        <div className="op-line">
          <input type="file" onChange={handleFileChange} />
          <button onClick={handleDataExport}>导出数据</button>
        </div>
        <ChatInputReact cusStyle={myStyle} atUserList={atPopoverList}  ref={childRef} error={handleError}></ChatInputReact>
      </div>
    </>
  )
}

export default App
